<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			form div {
				height: 40px;
				line-height: 40px;
			}
			form div:nth-child(4) {
				height: auto;
			}
			form div span:first-child {
				display: inline-block;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<form action="">
				<div>
					<span>姓名：</span>
					<span><input type="text" v-model="name" /></span>
				</div>
				<div>
					<span>性别：</span>
					<span>
						<!-- value 是指当前这个单选框、复选框的值，这个值是约定 -->
						<!-- v-model 的作用是选中以后，获取到 value，将值同步到 data 属性中 -->
						<input type="radio" id="male" value="man" v-model="gender" />
						<label for="male">男</label>
						<input type="radio" id="female" value="woman" v-model="gender" />
						<label for="female">女</label>
					</span>
				</div>
				<div>
					<span>爱好：</span>
					<input type="checkbox" id="ball" value="ball" v-model="habby" />
					<label for="ball">篮球</label>
					<input type="checkbox" id="sing" value="sing" v-model="habby" />
					<label for="sing">唱歌</label>
					<input type="checkbox" id="code" value="code" v-model="habby" />
					<label for="code">写代码</label>
				</div>
				<div>
					<span>职业：</span>
					<!-- 2. 给 select 添加 v-model 属性 -->
					<!-- 如果想选中多个值，必须加 multiple 属性 -->
					<select v-model="selectVal" multiple>
						<!-- 1. 先给 option 绑定初始值 value -->
						<option value="0">请选择职业</option>
						<option value="1">教师</option>
						<option value="2">软件工程师</option>
						<option value="3">律师</option>
					</select>
				</div>
				<div>
					<span>个人简介：</span>
					<textarea v-model="info"></textarea>
				</div>
				<div>
					<input type="submit" value="提交" @click.prevent="formHandle" />
				</div>
			</form>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					name: '',
					gender: '',
					habby: [],
					selectVal: ['1', '2'],
					info: '我是程序猿',
				},
				methods: {
					formHandle: function () {
						console.log(this.name)
						console.log(this.gender)
						console.log(this.habby)
						console.log(this.selectVal)
						console.log(this.info)
					},
				},
			})
		</script>
	</body>
</html>
